<template>
  <div class="toolbar" :class="{ disable: toolbarDisable }">
    <div id="pop-root">
      <div class="pop-container" ref="popContainer">
        <color-select
          ref="colorSelect"
          @changeColor="changeColor"
        ></color-select>
        <border-select ref="borderSelect" @changeBorder="changeBorder">
        </border-select>
        <paper-select
          ref="paperSelect"
          @changePaperSetting="handleChangePaperSetting"
        >
        </paper-select>
      </div>
    </div>
    <div
      v-for="(group, index) in toolbar.config.groups"
      :key="index"
      class="toolbar-group"
    >
      <div v-for="item in group.items" :key="item" class="toolbar-item">
        <template v-if="!toolbar.config['toolbarItem'][item].icon">
          <template v-for="i in toolbar.config['toolbarItem'][item].items">
            <el-tooltip
              class="item"
              effect="dark"
              :content="i.tips"
              placement="top"
              :key="i.icon"
            >
              <div
                class="toolbar-item toolbar-item-bg"
                :class="{
                  actived:
                    toolbar.config['toolbarItem'][item].activeValue ===
                    i.data.value,
                }"
                @click="toggle(i, toolbar.config['toolbarItem'][item])"
              >
                <IconPark size="18" :type="i.icon" fill="#333" />
              </div>
            </el-tooltip>
          </template>
        </template>
        <template
          v-else-if="toolbar.config['toolbarItem'][item].icon !== 'none'"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="toolbar.config['toolbarItem'][item].tips"
            placement="top"
          >
            <div
              class="toolbar-item-bg"
              :class="{
                actived: toolbar.config['toolbarItem'][item].active,
                disabled: !toolbar.config['toolbarItem'][item].enable,
              }"
              @click="
                toggle(
                  toolbar.config['toolbarItem'][item],
                  toolbar.config['toolbarItem'][item]
                )
              "
            >
              <!--          有下拉的图标-->
              <span
                v-if="
                  iconDropType.includes(
                    toolbar.config['toolbarItem'][item].type
                  )
                "
                class="iconWrapper"
              >
                <!--            边框-->
                <a
                  v-if="
                    toolbar.config['toolbarItem'][item].type === 'BorderSetting'
                  "
                  class="icon"
                  :class="[
                    `${activeBorder}`,
                    `toolbar-item-icon-${activeBorder}`,
                  ]"
                  @click="toggleWithDrop(toolbar.config['toolbarItem'][item])"
                ></a>
                <!--            颜色-->
                <a
                  v-else
                  :class="[
                    toolbar.config['toolbarItem'][item].action ===
                    'setBackgroundColor'
                      ? `color-${bgColor} toolbar-item-icon-bgc`
                      : '',
                    toolbar.config['toolbarItem'][item].action ===
                    'setFontColor'
                      ? `color-${fontColor} toolbar-item-icon-color`
                      : '',
                  ]"
                  class="icon"
                  @click="toggleWithDrop(toolbar.config['toolbarItem'][item])"
                >
                </a>
                <span
                  class="drop-down-arrow"
                  @click.stop="
                    showPop(toolbar.config['toolbarItem'][item].action, $event)
                  "
                ></span>
              </span>
              <!--           打印纸张设置-->
              <span
                v-else-if="
                  toolbar.config['toolbarItem'][item].type === 'PaperSetting'
                "
                class="question-drop-menu-head"
                @click="
                  showPop(toolbar.config['toolbarItem'][item].action, $event)
                "
              >
                <a class="icon toolbar-item-icon-pageset"></a>
                <input
                  class="paper-input"
                  ref="pageSizeInput"
                  disabled
                  :class="[showPaperPop ? 'active' : '']"
                  :value="paperSize"
                />
                <i class="drop-down-arrow"></i>
              </span>
              <IconPark
                v-else
                size="16"
                :type="toolbar.config['toolbarItem'][item].icon"
                fill="#333"
              />
            </div>
          </el-tooltip>
        </template>
        <!-- 图片start -->
        <template
          v-else-if="
            toolbar.config['toolbarItem'][item].type === 'ImageUploadItem'
          "
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="toolbar.config['toolbarItem'][item].tips"
            placement="top"
          >
            <el-upload
              action=""
              accept="image/*"
              :show-file-list="false"
              :http-request="handleHttpRequest"
            >
              <IconPark size="16" type="pic" fill="#333" />
            </el-upload>
          </el-tooltip>
        </template>
        <!-- 图片end -->
        <!-- 字体start -->
        <template
          v-else-if="toolbar.config['toolbarItem'][item].type === 'Select'"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="toolbar.config['toolbarItem'][item].tips"
            placement="top"
          >
            <el-select
              size="mini"
              v-model="toolbar.config['toolbarItem'][item].activeValue"
              @change="
                (val) => toggle(val, toolbar.config['toolbarItem'][item])
              "
            >
              <el-option
                v-for="f in toolbar.config['toolbarItem'][item].datasource"
                :key="f.value"
                :label="f.text"
                :value="f.value"
              >
              </el-option>
            </el-select>
          </el-tooltip>
        </template>
        <!-- 字体end -->
        <!-- 表格线start -->
        <template
          v-else-if="toolbar.config['toolbarItem'][item].type === 'gridLine'"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="toolbar.config['toolbarItem'][item].tips"
            placement="top"
          >
            <el-checkbox v-model="checkGridLine" @change="setGridLines"
              >表格线
            </el-checkbox>
          </el-tooltip>
        </template>
      </div>
      <!-- 表格线end -->
    </div>
  </div>
</template>

<script>
import { IconPark } from "@icon-park/vue/es/all"
import { config } from "./config"
import ToolbarHelper from "./toolbarHelper"
import Excel from "../excel/index"
import ColorSelect from "./components/ColorSelect"
import BorderSelect from "./components/BorderSelect"
import PaperSelect from "./components/PaperSelect"
export default {
  components: {
    IconPark,
    ColorSelect,
    BorderSelect,
    PaperSelect,
  },
  data() {
    return {
      iconDropType: ["ColorSetting", "BorderSetting"],
      toolbarDisable: false,
      toolbar: {
        config: {
          groups: [],
          toolbarItem: {},
        },
      },
      activeBorder: "border-bottom", // 当前的边框
      borderConfig: {
        direct: "bottom",
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "000000",
      }, // 边框的配置
      bgColor: "000000", // 背景颜色底部提示
      fontColor: "000000", // 字体颜色底部提示
      checkGridLine: true, // 表格线
      paperSize: "A4",
      paperConfig: {
        customize: { width: 0, height: 0 },
        layout: "vertical",
        size: "A4",
      },
      showPaperPop: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.toolbar = new ToolbarHelper(config, Excel)
      Excel.ToolbarHelper = this.toolbar
      Excel.injectListener(
        "toggleDisableToolbarItems",
        this.toggleDisableToolbarItems
      )
    },
    toggleDisableToolbarItems(bool) {
      this.toolbarDisable = bool
    },
    toggle(val, item) {
      switch (item.action) {
        case "setFontFamily":
          this.toolbar.setFontFamily(val)
          break
        case "setAlign":
          item.activeValue = val.data.value
          this.toolbar.setAlign(val.data)
          break
        case "setFontSize":
          this.toolbar.setFontSize(val)
          break
        case "setFontStyle":
          val.active = !val.active
          this.toolbar.setFontStyle({
            type: val.data.type,
            active: val.active,
          })
          break
        case "mergeOrUnmerge":
          val.active = !val.active
          this.toolbar.mergeOrUnmerge()
          break
        case "setBackgroundColor":
          this.toolbar.setBackgroundColor("#" + this.bgColor)
          break
        case "setFontColor":
          this.toolbar.setFontColor("#" + this.fontColor)
          break
        case "setBorder":
          this.toolbar.setBorder(this.borderConfig)
          break
        case "undo":
          this.toolbar.undo()
          break
        case "redo":
          this.toolbar.redo()
          break
        case "insertQr":
          this.toolbar.insertQr()
          break
        case "insertBr":
          this.toolbar.insertBr()
          break
        default:
          break
      }
    },
    // 改变有下拉图标的方法
    toggleWithDrop(item) {
      switch (item.action) {
        case "setBackgroundColor":
          this.toolbar.setBackgroundColor("#" + this.bgColor)
          break
        case "setFontColor":
          this.toolbar.setFontColor("#" + this.fontColor)
          break
        case "setBorder":
          this.toolbar.setBorder(this.borderConfig)
          break
        default:
          break
      }
    },
    // 变更背景颜色以及字体颜色
    changeColor(data) {
      const { color, actionType } = data
      if (actionType === "setBackgroundColor") {
        this.toolbar.setBackgroundColor(color)
        this.bgColor = color.substring(1)
      } else {
        this.toolbar.setFontColor(color)
        this.fontColor = color.substring(1)
      }
    },
    // 设置边框
    changeBorder(data) {
      this.activeBorder = "border-" + data.direct
      this.borderConfig = { ...data }
      this.toolbar.setBorder(data)
    },
    // 改变打印纸张
    handleChangePaperSetting(data) {
      this.paperSize = data.size
      this.showPaperPop = false
      this.paperConfig = { ...data }
      this.paperSize = data.size
      this.toolbar.setPaperSetting(data)
    },

    changePaperPopShow(event) {
      this.showPaperPop = !this.showPaperPop
    },

    showPop(actionType, event) {
      this.initPopPostition(event, actionType)
      if (
        actionType === "setBackgroundColor" ||
        actionType === "setFontColor"
      ) {
        const color =
          actionType === "setBackgroundColor" ? this.bgColor : this.fontColor
        const data = {
          actionType,
          color,
        }
        this.$refs.colorSelect.initColorPicker(data)
        this.$refs.borderSelect &&
          this.$refs.borderSelect.initData({ showVisible: false })
        this.$refs.paperSelect &&
          this.$refs.paperSelect.initData({ showVisible: false })
      } else if (actionType === "setBorder") {
        this.$refs.borderSelect.initData({ activeBorder: this.activeBorder })
        this.showPaperPop = false
        this.$refs.paperSelect &&
          this.$refs.paperSelect.initData({ showVisible: false })
        this.$refs.colorSelect &&
          this.$refs.colorSelect.initColorPicker({ showColor: false })
      } else if (actionType === "setPaperSetting") {
        this.$refs.paperSelect.initData({ ...this.paperConfig })
        this.$refs.borderSelect &&
          this.$refs.borderSelect.initData({ showVisible: false })
        this.$refs.borderSelect &&
          this.$refs.borderSelect.initData({ showVisible: false })
      }
    },
    setGridLines(val) {
      this.toolbar.setGridLines(val)
    },
    initPopPostition(event, actionType) {
      const parentPosition = event.target.parentNode.getBoundingClientRect()
      const container = this.$refs.popContainer
      // const positon = event.target.getBoundingClientRect()
      container.style.top =
        parentPosition.y + event.target.parentNode.clientHeight + 20 + "px"
      if (actionType === "setPaperSetting") {
        container.style.top =
          parentPosition.y + event.target.parentNode.clientHeight + 10 + "px"
        const xPosition = this.$refs?.pageSizeInput[0].getBoundingClientRect().x
        container.style.left = xPosition + "px"
      } else {
        container.style.left = parentPosition.x - 10 + "px"
      }
      let popSize = 330
      if (actionType === "setBorder") {
        popSize = 120
      }
      if (event.pageX - event.offsetX + popSize > document.body.clientWidth) {
        container.style.left = document.body.clientWidth - popSize - 10 + "px"
      }
    },
    // 上传图片
    async handleHttpRequest(value) {
      const file = value.file
      const url = await this.blobToDataURI(file)
      this.$emit("input", JSON.stringify(file))
      this.toolbar.insertImg({
        ClientUrl: url,
        FileName: file.name,
        MediaType: file.type,
      })
    },
    blobToDataURI(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader()
        fileReader.onload = (e) => {
          resolve(e.target.result)
        }
        // readAsDataURL
        fileReader.readAsDataURL(blob)
        fileReader.onerror = () => {
          reject(new Error("文件流异常"))
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.toolbar.disable {
  opacity: 0.6;
  pointer-events: none;
}
.toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: #fafafa;
  border-radius: 2px;
  border-bottom: 1px solid #e4ebf0;

  .toolbar-group {
    display: flex;
    position: relative;
    padding: 0 10px;

    .toolbar-item {
      display: inline-block;
      height: 24px;
      min-width: 24px;
      padding: 10px 0;
      text-align: center;
      margin-left: 5px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .toolbar-item-bg {
      box-sizing: border-box;
      padding: 2px;
      border: 1px solid transparent;
      border-radius: 2px;

      &:hover {
        border: 1px solid #e4ebf0;
      }
    }

    .toolbar-item-bg.actived {
      background: #ecf5ff;
      border: 1px solid #e4ebf0;
    }
    .toolbar-item-bg.disabled {
      opacity: 0.2;
      cursor: not-allowed;
    }
  }

  .toolbar-group:not(:last-child):after {
    content: "";
    display: inline-block;
    height: 16px;
    width: 1px;
    background-color: #c2cbd1;
    top: 14px;
    right: -1px;
    position: absolute;
  }
}

.drop-down-arrow {
  width: 10px;
  height: 24px;
  display: inline-block;
  background-position: 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  background-image: url("~@/assets/image/arrow-down.png");
  box-sizing: border-box;
  position: relative;
}

i.drop-down-arrow {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(~@/assets/image/arrow-down.png);
}

.drop-down-arrow:hover {
  background-color: #e4ebf0;
  box-shadow: inset 0 0 0 1px rgba(194, 203, 209, 0.6);
  border-radius: 0 2px 2px 0;
}

.toolbar-item .icon {
  background-repeat: no-repeat;
  display: inline-block;
  height: 24px;
  width: 24px;
  box-sizing: border-box;
  position: relative;
}

.toolbar-item .iconWrapper {
  position: relative;
}

.toolbar-item .iconWrapper:before {
  opacity: 1 !important;
}

.toolbar-item.showPop.iconDrop .question-drop-menu-head:before {
  left: 29px;
}

.toolbar-item .icon:hover {
  box-shadow: inset 0 0 0 1px #c2cbd1;
  border-radius: 2px;
}

.toolbar-item-icon-bgc:hover,
.toolbar-item-icon-color:hover {
  background-color: #e4ebf0;
}

.toolbar-item-icon-bgc:after,
.toolbar-item-icon-color:after {
  content: "";
  width: 15px;
  height: 2px;
  background-color: #000;
  display: inline-block;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

//弹窗的小尖尖
.toolbar-item.showPop .iconWrapper:before {
  left: 18px;
}

//弹窗
.pop-container {
  position: fixed;
  z-index: 1000;
  top: 100px;
  left: 100px;
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

// .pop-container:before {
// content: '';
// border-right: 6px solid transparent;
// border-left: 6px solid transparent;
// border-bottom: 6px solid #fff;
// position: absolute;
// width: 0;
// height: 0;
// z-index: 999999999;
// top: -6px;
// left: 32px;
// }

.toolbar-item-icon-color {
  background-position-y: -193px;
}

.toolbar-item-icon-color {
  background-image: url(~@/assets/image/css_sprites.png);
  background-position-x: -5px;
}

.toolbar-item-icon-bgc {
  background-position-y: -882px;
}

.toolbar-item-icon-bgc {
  background-image: url(~@/assets/image/css_sprites.png);
  background-position-x: -5px;
}

.toolbar-item-icon-bgc.color-ffffff:after,
.toolbar-item-icon-color.color-ffffff:after {
  background-color: #fff;
}

.toolbar-item-icon-bgc.color-000000:after,
.toolbar-item-icon-color.color-000000:after {
  background-color: #000;
}

.toolbar-item-icon-bgc.color-EEECE1:after,
.toolbar-item-icon-color.color-EEECE1:after {
  background-color: #eeece1;
}

.toolbar-item-icon-bgc.color-1F497D:after,
.toolbar-item-icon-color.color-1F497D:after {
  background-color: #1f497d;
}

.toolbar-item-icon-bgc.color-4F81BD:after,
.toolbar-item-icon-color.color-4F81BD:after {
  background-color: #4f81bd;
}

.toolbar-item-icon-bgc.color-C0504D:after,
.toolbar-item-icon-color.color-C0504D:after {
  background-color: #c0504d;
}

.toolbar-item-icon-bgc.color-9BBB59:after,
.toolbar-item-icon-color.color-9BBB59:after {
  background-color: #9bbb59;
}

.toolbar-item-icon-bgc.color-8064A2:after,
.toolbar-item-icon-color.color-8064A2:after {
  background-color: #8064a2;
}

.toolbar-item-icon-bgc.color-4BACC6:after,
.toolbar-item-icon-color.color-4BACC6:after {
  background-color: #4bacc6;
}

.toolbar-item-icon-bgc.color-F79646:after,
.toolbar-item-icon-color.color-F79646:after {
  background-color: #f79646;
}

.toolbar-item-icon-bgc.color-F2F2F2:after,
.toolbar-item-icon-color.color-F2F2F2:after {
  background-color: #f2f2f2;
}

.toolbar-item-icon-bgc.color-DDD9C3:after,
.toolbar-item-icon-color.color-DDD9C3:after {
  background-color: #ddd9c3;
}

.toolbar-item-icon-bgc.color-C6D9F0:after,
.toolbar-item-icon-color.color-C6D9F0:after {
  background-color: #c6d9f0;
}

.toolbar-item-icon-bgc.color-DBE5F1:after,
.toolbar-item-icon-color.color-DBE5F1:after {
  background-color: #dbe5f1;
}

.toolbar-item-icon-bgc.color-F2DCDB:after,
.toolbar-item-icon-color.color-F2DCDB:after {
  background-color: #f2dcdb;
}

.toolbar-item-icon-bgc.color-EBF1DD:after,
.toolbar-item-icon-color.color-EBF1DD:after {
  background-color: #ebf1dd;
}

.toolbar-item-icon-bgc.color-E5E0EC:after,
.toolbar-item-icon-color.color-E5E0EC:after {
  background-color: #e5e0ec;
}

.toolbar-item-icon-bgc.color-DBEEF3:after,
.toolbar-item-icon-color.color-DBEEF3:after {
  background-color: #dbeef3;
}

.toolbar-item-icon-bgc.color-FDEADA:after,
.toolbar-item-icon-color.color-FDEADA:after {
  background-color: #fdeada;
}

.toolbar-item-icon-bgc.color-D8D8D8:after,
.toolbar-item-icon-color.color-D8D8D8:after {
  background-color: #d8d8d8;
}

.toolbar-item-icon-bgc.color-595959:after,
.toolbar-item-icon-color.color-595959:after {
  background-color: #595959;
}

.toolbar-item-icon-bgc.color-C4BD97:after,
.toolbar-item-icon-color.color-C4BD97:after {
  background-color: #c4bd97;
}

.toolbar-item-icon-bgc.color-8DB3E2:after,
.toolbar-item-icon-color.color-8DB3E2:after {
  background-color: #8db3e2;
}

.toolbar-item-icon-bgc.color-B8CCE4:after,
.toolbar-item-icon-color.color-B8CCE4:after {
  background-color: #b8cce4;
}

.toolbar-item-icon-bgc.color-E5B9B7:after,
.toolbar-item-icon-color.color-E5B9B7:after {
  background-color: #e5b9b7;
}

.toolbar-item-icon-bgc.color-D7E3BC:after,
.toolbar-item-icon-color.color-D7E3BC:after {
  background-color: #d7e3bc;
}

.toolbar-item-icon-bgc.color-CCC1D9:after,
.toolbar-item-icon-color.color-CCC1D9:after {
  background-color: #ccc1d9;
}

.toolbar-item-icon-bgc.color-B7DDE8:after,
.toolbar-item-icon-color.color-B7DDE8:after {
  background-color: #b7dde8;
}

.toolbar-item-icon-bgc.color-FBD5B5:after,
.toolbar-item-icon-color.color-FBD5B5:after {
  background-color: #fbd5b5;
}

.toolbar-item-icon-bgc.color-BFBFBF:after,
.toolbar-item-icon-color.color-BFBFBF:after {
  background-color: #bfbfbf;
}

.toolbar-item-icon-bgc.color-3F3F3F:after,
.toolbar-item-icon-color.color-3F3F3F:after {
  background-color: #3f3f3f;
}

.toolbar-item-icon-bgc.color-938953:after,
.toolbar-item-icon-color.color-938953:after {
  background-color: #938953;
}

.toolbar-item-icon-bgc.color-548DD4:after,
.toolbar-item-icon-color.color-548DD4:after {
  background-color: #548dd4;
}

.toolbar-item-icon-bgc.color-95B3D7:after,
.toolbar-item-icon-color.color-95B3D7:after {
  background-color: #95b3d7;
}

.toolbar-item-icon-bgc.color-D99694:after,
.toolbar-item-icon-color.color-D99694:after {
  background-color: #d99694;
}

.toolbar-item-icon-bgc.color-C3D69B:after,
.toolbar-item-icon-color.color-C3D69B:after {
  background-color: #c3d69b;
}

.toolbar-item-icon-bgc.color-B2A2C7:after,
.toolbar-item-icon-color.color-B2A2C7:after {
  background-color: #b2a2c7;
}

.toolbar-item-icon-bgc.color-92CDDC:after,
.toolbar-item-icon-color.color-92CDDC:after {
  background-color: #92cddc;
}

.toolbar-item-icon-bgc.color-FAC08F:after,
.toolbar-item-icon-color.color-FAC08F:after {
  background-color: #fac08f;
}

.toolbar-item-icon-bgc.color-A5A5A5:after,
.toolbar-item-icon-color.color-A5A5A5:after {
  background-color: #a5a5a5;
}

.toolbar-item-icon-bgc.color-262626:after,
.toolbar-item-icon-color.color-262626:after {
  background-color: #262626;
}

.toolbar-item-icon-bgc.color-494429:after,
.toolbar-item-icon-color.color-494429:after {
  background-color: #494429;
}

.toolbar-item-icon-bgc.color-17365D:after,
.toolbar-item-icon-color.color-17365D:after {
  background-color: #17365d;
}

.toolbar-item-icon-bgc.color-366092:after,
.toolbar-item-icon-color.color-366092:after {
  background-color: #366092;
}

.toolbar-item-icon-bgc.color-953734:after,
.toolbar-item-icon-color.color-953734:after {
  background-color: #953734;
}

.toolbar-item-icon-bgc.color-76923C:after,
.toolbar-item-icon-color.color-76923C:after {
  background-color: #76923c;
}

.toolbar-item-icon-bgc.color-5F497A:after,
.toolbar-item-icon-color.color-5F497A:after {
  background-color: #5f497a;
}

.toolbar-item-icon-bgc.color-31849B:after,
.toolbar-item-icon-color.color-31849B:after {
  background-color: #31849b;
}

.toolbar-item-icon-bgc.color-E36C09:after,
.toolbar-item-icon-color.color-E36C09:after {
  background-color: #e36c09;
}

.toolbar-item-icon-bgc.color-7F7F7F:after,
.toolbar-item-icon-color.color-7F7F7F:after {
  background-color: #7f7f7f;
}

.toolbar-item-icon-bgc.color-0C0C0C:after,
.toolbar-item-icon-color.color-0C0C0C:after {
  background-color: #0c0c0c;
}

.toolbar-item-icon-bgc.color-1D1B10:after,
.toolbar-item-icon-color.color-1D1B10:after {
  background-color: #1d1b10;
}

.toolbar-item-icon-bgc.color-0F243E:after,
.toolbar-item-icon-color.color-0F243E:after {
  background-color: #0f243e;
}

.toolbar-item-icon-bgc.color-244061:after,
.toolbar-item-icon-color.color-244061:after {
  background-color: #244061;
}

.toolbar-item-icon-bgc.color-632423:after,
.toolbar-item-icon-color.color-632423:after {
  background-color: #632423;
}

.toolbar-item-icon-bgc.color-4F6128:after,
.toolbar-item-icon-color.color-4F6128:after {
  background-color: #4f6128;
}

.toolbar-item-icon-bgc.color-3F3151:after,
.toolbar-item-icon-color.color-3F3151:after {
  background-color: #3f3151;
}

.toolbar-item-icon-bgc.color-205867:after,
.toolbar-item-icon-color.color-205867:after {
  background-color: #205867;
}

.toolbar-item-icon-bgc.color-984806:after,
.toolbar-item-icon-color.color-984806:after {
  background-color: #984806;
}

.toolbar-item-icon-bgc.color-C00000:after,
.toolbar-item-icon-color.color-C00000:after {
  background-color: #c00000;
}

.toolbar-item-icon-bgc.color-FF0000:after,
.toolbar-item-icon-color.color-FF0000:after {
  background-color: red;
}

.toolbar-item-icon-bgc.color-FFC000:after,
.toolbar-item-icon-color.color-FFC000:after {
  background-color: #ffc000;
}

.toolbar-item-icon-bgc.color-FFFF00:after,
.toolbar-item-icon-color.color-FFFF00:after {
  background-color: #ff0;
}

.toolbar-item-icon-bgc.color-92D050:after,
.toolbar-item-icon-color.color-92D050:after {
  background-color: #92d050;
}

.toolbar-item-icon-bgc.color-00B050:after,
.toolbar-item-icon-color.color-00B050:after {
  background-color: #00b050;
}

.toolbar-item-icon-bgc.color-00B0F0:after,
.toolbar-item-icon-color.color-00B0F0:after {
  background-color: #00b0f0;
}

.toolbar-item-icon-bgc.color-0070C0:after,
.toolbar-item-icon-color.color-0070C0:after {
  background-color: #0070c0;
}

.toolbar-item-icon-bgc.color-002060:after,
.toolbar-item-icon-color.color-002060:after {
  background-color: #002060;
}

.toolbar-item-icon-bgc.color-7030A0:after,
.toolbar-item-icon-color.color-7030A0:after {
  background-color: #7030a0;
}

.toolbar-item-icon-bgc.color-808080:after,
.toolbar-item-icon-color.color-808080:after {
  background-color: #808080;
}

//边框
.border-none {
  background-image: url(.~@/assets/image/border-none.png);
}

.border-all,
.border-none {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-all {
  background-image: url(.~@/assets/image/border-all.png);
}

.border-outside {
  background-image: url(.~@/assets/image/border-outside.png);
}

.border-left,
.border-outside {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-left {
  background-image: url(.~@/assets/image/border-left.png);
}

.border-right {
  background-image: url(.~@/assets/image/border-right.png);
}

.border-right,
.border-top {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.border-top {
  background-image: url(.~@/assets/image/border-top.png);
}

.border-bottom {
  background-image: url(.~@/assets/image/border-bottom.png);
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.toolbar-item-icon-pageset {
  background-image: url(.~@/assets/image/css_sprites.png);
  background-position-x: -5px;
  background-position-y: -952px;
}

.iconDrop.disabled .drop-down-arrow:hover,
.iconDrop.disabled .icon:hover {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  cursor: not-allowed;
}

.iconDrop.showPop .question-drop-menu-head:before {
  content: "";
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 999999999;
  left: 29px;
  top: 28px;
}

.question-drop-menu-head {
  display: inline-block;
  height: 24px;
  position: relative;
  cursor: pointer;
}

.question-drop-menu-head > input {
  vertical-align: top;
  display: inline-block;
  height: 24px;
  width: 60px;
  padding: 0 15px 0 5px;
  border: 1px solid #e4ebf0;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
}

.question-drop-menu-head > input:hover {
  border: 1px solid #96d0fa;
}

.question-drop-menu-head > input.active {
  border: 1px solid #1587d9;
}
</style>
